<template>
    <div class="tab-content">
        <el-form ref="monitorFormRef" :model="monitorForm" :rules="monitorRules" label-width="150px" class="config-form">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="光伏发电量" prop="solarPower">
                        <el-input-number v-model="monitorForm.solarPower" placeholder="请输入光伏发电量" :controls="false">
                        </el-input-number>
                        <span style="font-size: 12px; color: #909399;margin-left: 10px;">kWh</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="绿电直供量" prop="batterySwap">
                        <el-input-number v-model="monitorForm.batterySwap" placeholder="请输入换电量" :controls="false">

                        </el-input-number>
                        <span style="font-size: 12px; color: #909399;margin-left: 10px;">kWh</span>

                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="弃电接收量" prop="travel">
                        <el-input-number v-model="monitorForm.travel" placeholder="请输入出行次数" :controls="false">

                        </el-input-number>
                        <span style="font-size: 12px; color: #909399;margin-left: 10px;">次</span>

                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="弃电利用量" prop="transport">
                        <el-input-number v-model="monitorForm.transport" placeholder="请输入运力次数" :controls="false">

                        </el-input-number>
                        <span style="font-size: 12px; color: #909399;margin-left: 10px;">次</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="saveMonitorData">保存能源服务配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive, onMounted, defineExpose } from 'vue'

    import { ElMessage, ElMessageBox } from 'element-plus'
    import { getDataClassifyDetail, updateDataClassify } from '@/api/port'
    


    // ========================================================================================
    // 模块4: 能源服务配置
    // ========================================================================================

    // 能源服务配置表单
    const monitorForm = reactive({
        solarPower: 0, // 光伏发电
        batterySwap: 0, // 换电
        travel: 0, // 出行
        transport: 0 // 运力
    })

    // 能源服务配置验证规则
    const monitorRules = {
        solarPower: [{ required: true, message: '光伏发电量不能为空', trigger: 'blur' }],
        batterySwap: [{ required: true, message: '绿电直供量不能为空', trigger: 'blur' }],
        travel: [{ required: true, message: '弃电接收量不能为空', trigger: 'blur' }],

        transport: [{ required: true, message: '弃电利用量不能为空', trigger: 'blur' }]

    }

    // 能源服务表单引用
    const monitorFormRef = ref()

    // 保存能源服务配置数据
    const saveMonitorData = async () => {
        if (!monitorFormRef.value) return
        
        try {
            await monitorFormRef.value.validate()
            await updateDataClassify({
                id: 2,
                key: 'module3',
                value: monitorForm
            })
            console.log('保存能源服务配置:', toRaw(monitorForm))
            ElMessage.success('能源服务配置保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }

    // 初始化数据
    const init = (data: any) => {
        monitorForm.solarPower = data.solarPower
        monitorForm.batterySwap = data.batterySwap
        monitorForm.travel = data.travel
        monitorForm.transport = data.transport
    }

    defineExpose({
        init
    })

</script>
<style lang="less" scoped>

</style>